import React, { Component, useState } from 'react';
import { CloseCircleFilled } from '@ant-design/icons';
import { Button } from 'antd';
import { useModal } from './myModal/useModal';
import { ConfirmationModal } from './myModal/ConfirmationModal';
//组件
import Lunbo from './lunboITem/index';
import MyModal from './myModal/modal';
import MyStep from './myStep/index';
import HookStep from './myhooksStep/index';
//过度动画
import { CSSTransition } from 'react-transition-group';
import './myModal/styledComponents/anmate.css';

import {
  WarpStyledModal,
  StyledModal,
} from './myModal/styledComponents/styled';

const ActivityManagement = () => {
  const { isShown, toggle } = useModal();
  const onConfirm = () => {
    toggle();
  };
  const onCancel = () => toggle();
  let a = Math.pow(4, 2);
  console.log(a, 'a');

  return (
    <div>
      <HookStep></HookStep>
      活动管理
      <MyStep></MyStep>
      <Lunbo autoplay={false}></Lunbo>
      <Button onClick={() => toggle()}> 我是弹出框</Button>
      {isShown ? (
        <CSSTransition in={isShown} classNames="card" timeout={1000} appear>
          <h1>我是一个动画</h1>
        </CSSTransition>
      ) : null}
      {/* 弹出框组件 */}
      <MyModal
        hide={toggle}
        closeIcon={<CloseCircleFilled />}
        isShown={isShown}
        modalContent={
          <ConfirmationModal
            onConfirm={onConfirm}
            onCancel={onCancel}
            message="这里可以输入一段提示内容吧"
            sureText="确定"
            cancelText="取消"
            sureColor="skyblue"
            sureHoverColor="blue"
            cancelColor="lightgrey"
            cancelHoverColor="grey"
          />
        }
      ></MyModal>
      <div className="boxtrans"></div>
      <StyledModal>asdasd</StyledModal>
      <WarpStyledModal>adsad</WarpStyledModal>
    </div>
  );
};

export default ActivityManagement;
